<template>
  <div class="config-bar">
        <div class="cptTitle">
          {{configBarShow ? '组件配置':'大屏配置'}}
        </div>
        <el-tabs v-show="configBarShow" v-model="configTab" :stretch="true">
          <el-tab-pane label="基础" name="basic" lazy>
            <el-form class="customForm" label-width="90px" size="mini">
             <el-form-item label="图层名称">
               <el-input v-model="currentCpt.cptTitle" />
             </el-form-item>
              <tm-group label="坐标">
                <el-form-item label="宽度">
                  <el-input-number :min="20" v-model="currentCpt.cptWidth" size="small" />
                </el-form-item>
                <el-form-item label="高度">
                  <el-input-number :min="20"  v-model="currentCpt.cptHeight" size="small"/>
                </el-form-item>
                <el-form-item label="X 轴">
                  <el-input-number  v-model="currentCpt.cptX" size="small"/>
                </el-form-item>
                <el-form-item label="Y 轴">
                  <el-input-number  v-model="currentCpt.cptY" size="small"/>
                </el-form-item>
              </tm-group>
              <el-form-item label="旋转">
                <el-slider
                    v-model="currentCpt.cptRotate"
                    :min="0" :max="360"
                    show-input>
                </el-slider>
              </el-form-item>
              <el-form-item label="初始隐藏">
                <el-tooltip content="初始状态，不渲染组件">
                  <el-switch v-model="currentCpt.isHidden"/>
                </el-tooltip>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <template v-if="cptDataCustomerShow">
            <el-tab-pane label="属性" name="custom" lazy >
              <div class="customForm" :style="{height:(height-140)+'px'}" v-if="currentCpt && currentCpt.cptOption">
                <component :is="currentCpt.cptOptionKey?currentCpt.cptOptionKey: + currentCpt.cptKey+'-option'" :attribute="currentCpt.cptOption.attribute"/>
              </div>
            </el-tab-pane>
          </template>

          <!--      展示数据表单需在option.js初始化cptDataForm     -->
          <el-tab-pane label="数据" name="data" lazy v-if="cptDataFormShow">
            <div class="customForm" :style="{height:(height-140)+'px'}">
              <data-config :option="currentCpt.cptOption" @refreshCptData="refreshCptData"  />
            </div>
          </el-tab-pane>
          <el-tab-pane label="交互" name="event" lazy v-if="cptInteractionShow">
            <interaction-config
                :interaction="currentCpt.cptOption.interaction"
                :option="currentCpt"
                :id="currentCpt.id"
                :constants="designData.constants"/>
          </el-tab-pane>
        </el-tabs>
        <div v-show="!configBarShow" style="margin-top: 10px;">
          <el-form class="customForm" :model="designData" label-width="100px" size="small">
            <el-form-item label="网站标题">
              <el-input v-model="designData.title" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="网站描述">
              <el-input type="textarea" v-model="designData.simpleDesc"></el-input>
            </el-form-item>
            <el-form-item label="宽度">
              <el-input-number v-model="designData.scaleX" :min="640" :max="10240" style="width: 100%"/>
            </el-form-item>
            <el-form-item label="高度">
              <el-input-number v-model="designData.scaleY" :min="320" :max="10240" style="width: 100%"/>
            </el-form-item>
            <el-form-item label="背景颜色">
              <tm-color-range v-model="designData.bgColor" show-alpha/>
            </el-form-item>
            <el-form-item label="适配方式">
              <el-radio-group v-model="designData.screenAdapter">
                <el-tooltip content="自适应展示，等比缩放会留白">
                  <el-radio-button label="auto"><i class="my-icon icon-invert" /></el-radio-button>
                </el-tooltip>
                <el-tooltip content="拉伸铺满">
                  <el-radio-button label="stretch">
                    <i class="my-icon icon-expand"></i>
                  </el-radio-button>
                </el-tooltip>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="背景图片">
              <tm-img-pick v-model="designData.bgImg"/>
            </el-form-item>
          </el-form>
        </div>
  </div>
</template>

<script>
import { isJSON } from '@/utils/myutils';
import { codemirror } from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/keymap/sublime'; // sublime编辑器效果
import 'codemirror/theme/dracula.css'; // 配置里面也需要theme设置为monokai
import 'codemirror/mode/sql/sql.js'; // 配置里面也需要mode设置为vue
import 'codemirror/addon/selection/active-line';
import {fileUrl} from "/env";
import tmColorRange from '@/package/components/tm-color-range'
import tmImgPick from '@/package/components/tm-img-pick'
import dataConfig from './data-config'
import interactionConfig from './interaction-config'

export default {
  name: 'configBar',
  props: {
    currentCpt: Object,
    designData: Object,
    height:Number
  },
  components: {
    codemirror,
    tmColorRange,
    tmImgPick,
    dataConfig,
    interactionConfig
  },
  watch: {
    currentCpt(newVal) {
      this.cptDataFormShow = false;
      this.cptInteractionShow = false

      if (typeof newVal.cptX === 'undefined') {
        this.configBarShow = false;//清空时
        this.configTab = 'basic'
      } else {
        if(this.currentCpt.isGroup) {
          this.cptDataCustomerShow = false
          this.configTab = 'basic'
        }
        if (this.currentCpt.cptOption && this.currentCpt.cptOption.cptDataForm) {
          this.cptDataCustomerShow = true;
          this.cptDataFormShow = true
        }
        if (this.currentCpt.cptOption && this.currentCpt.cptOption.interaction) {
          this.cptInteractionShow = true
        }
      }
    },
  },
  computed: {
  },
  data() {
    return {
      fileUrl:fileUrl,
      cptDataFormShow: false,
      cptInteractionShow: false,
      cptDataCustomerShow: false,
      configTab: 'basic',
      configBarShow: false
    };
  },
  methods: {
    confirmCheck(fileUrl){
      this.designData.bgImg = fileUrl;
    },
    showGallery(){
      this.$refs.gallery.opened();
    },
    handleRemove(){
      this.designData.bgImg = ''
    },
    changeDataSource(val) {
      //静态数据不显示轮询按钮
      if (val === 1) {
        this.currentCpt.cptOption.cptDataForm.pollTime = 0;
      }
    },
    // 刷新数据，调用父组件(index)中refreshCptData方法
    // 在父组件中再调用选中图层中的refreshCptData方法
    // 图层中的refreshCptData方法再自行调后端接口渲染数据，文本框的内容和数据类型组装在option.cptDataForm中
    refreshCptData() {
      this.$emit('refreshCptData');
    },
    showCptConfig() {
      this.configBarShow = true;
    },
  }
};
</script>

<style lang="less" scoped>

.config-bar {
  height: 100%;
  background-color: var(--config-bg1);
  color: var(--text-color);

  .cptTitle {
    line-height: 40px;
    text-align: center;
    background: var(--config-bg2);
  }

  /deep/ .el-tabs{
    height: calc(100% - 40px);
    &__item {
      color: var(--text-color);
    }
    &__nav-wrap {
      &::after {
        background-color: var(--tab-bd-color);
      }
    }
    &__content {
      height: calc(100% - 70px);
    }
    .el-tab-pane {
      height: 100%;
      overflow-y: auto;
    }

  }

  /deep/ .customForm {
    height: 100%;
  }
}


.closeItem:hover {cursor: pointer;background: #2b3340;}
.uploadItem{width: 120px;height: 120px;text-align: center;line-height: 120px;border: 1px solid #ddd;cursor: pointer}
</style>
